<%--
  Created by IntelliJ IDEA.
  User: xinlong
  Date: 2017/11/5
  Time: 14:20
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>景点管理列表页</title>
    <%@include file="/resources/common/head.jsp" %>
    <script src="/resources/script/wetravel.js" type="text/javascript"></script>
    <script src="/resources/css/wetravel.css" type="text/css"></script>
    <style type="text/css">
        h5{
            margin-top: 2px;
            margin-bottom: 2px;
        }
        .head{
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            display: inline-block;
        }
        .body{
            height: 30px;
            line-height: 30px;
            text-align: center;
            padding-left: 5px;
            padding-right: 5px;
            display: inline-block;
        }
        .body-select{
            height: 30px;
            line-height: 30px;
            text-align: center;
            padding-left: 5px;
            padding-right: 5px;
            display: inline-block;
            background-color: #0078D7;
        }
        .body-select a:link{
            color: #fff;
        }
        .theme{
        }
        .scenic-spot-table{
            margin-top: 10px;
            margin-bottom: 0px !important;
        }
        .scenic-spot-main-img{
            width: 140px;
            text-align: center;
        }
        .scenic-spot-name{
            font-size: 18px;
            display: block;
        }
        .scenic-spot-subtitle{

        }
        .scenic-spot-address{

        }
        .body-once,.body-once-all{
            display: inline-block;
            color: #0078D7;
        }
        .body-second,.body-second-all{
            display: inline-block;
            color: #0078D7;
        }
        .body-once[onclick="javascript:selectByCategoryId(${requestScope.once_category_select.id})"]
        {
            height: 24px;
            line-height: 24px;
            text-align: center;
            padding-left: 5px;
            padding-right: 5px;
            display: inline-block;
            background-color: #0078D7;
            color: #ffffff;
        }
        .body-second[onclick="javascript:selectByCategoryId(${requestScope.second_category_select.id})"]
        {
            height: 24px;
            line-height: 24px;
            text-align: center;
            padding-left: 5px;
            padding-right: 5px;
            display: inline-block;
            background-color: #0078D7;
            color: #ffffff;
        }
        .body-once-all[onclick="javascript:selectByCategoryId(${requestScope.once_category_select.id})"]
        {
            height: 24px;
            line-height: 24px;
            text-align: center;
            padding-left: 5px;
            padding-right: 5px;
            display: inline-block;
            background-color: #0078D7;
            color: #ffffff;
        }
        .body-second-all[onclick="javascript:selectByCategoryId(${requestScope.second_category_select.id})"]
        {
            height: 24px;
            line-height: 24px;
            text-align: center;
            padding-left: 5px;
            padding-right: 5px;
            display: inline-block;
            background-color: #0078D7;
            color: #ffffff;
        }
        .page-helper{
            margin: 10px auto !important;
        }
    </style>
    <script type="text/javascript">
        function selectByCategoryId(categoryId){
            $("#categoryId").val(categoryId);
            $("#scenic-spot-form").submit();
        }
        function commit(theme,categoryId){
            $("#theme").val(theme);
            $("#categoryId").val(categoryId);
            $("#scenic-spot-form").submit();
        }
        function changePage(num){
            $("#pageNum").val(num);
            $("#scenic-spot-form").submit();
        }
    </script>
</head>
<body>
<form id="scenic-spot-form" action="/manage/scenic_spot/list" method="post">
    <input type="hidden" id="theme" name="theme" value="${requestScope.theme}">
    <input type="hidden" id="categoryId" name="categoryId" value="${requestScope.categoryId}">
    <input type="hidden" id="pageNum" name="pageNum" value="${requestScope.pageResult.pageNum}">
</form>
<div class="container">
    <div class="row">
        <table class="table table-bordered">
            <tbody valign="middle">
            <tr>
                <td>
                    <label class="head">景点主题</label>
                </td>
                <td>
                    <div class="body">
                        <a href="#" class="">全部</a>
                    </div>
                    <div class="body">
                        <a href="#" class="">名胜风光</a>
                    </div>
                    <div class="body-select">
                        <a href="#" class="">古镇园林</a>
                    </div>
                    <div class="body">
                        <a href="#" class="">水上乐园</a>
                    </div>
                    <div class="body">
                        <a href="#" class="">家庭亲子</a>
                    </div>
                    <div class="body">
                        <a href="#" class="">境外精选</a>
                    </div>
                    <div class="body">
                        <a href="#" class="">赏花田园</a>
                    </div>
                    <div class="body">
                        <a href="#" class="">主题乐园</a>
                    </div>
                    <div class="body">
                        <a href="#" class="">演出表演</a>
                    </div>
                    <div class="body">
                        <a href="#" class="">城市生活</a>
                    </div>
                    <div class="body">
                        <a href="#" class="">拜佛祈福</a>
                    </div>
                    <div class="body">
                        <a href="#" class="">节假日旅游胜地</a>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <label class="head">景点地区</label>
                </td>
                <td>
                    <div class="body-once-all" onclick="javascript:selectByCategoryId(0)">
                        <span class="">全部</span>
                    </div>
                    <c:forEach items="${requestScope.once_categoryList}" var="category" varStatus="status">
                        <div class="body-once" onclick="javascript:selectByCategoryId(${category.id})">
                            <span class="">${category.name}</span>
                        </div>
                    </c:forEach>
                </td>
            </tr>
            <tr>
                <td>
                    <label class="head">景点城市</label>
                </td>
                <td>
                    <div class="body-second-all" onclick="javascript:selectByCategoryId(${requestScope.second_all_select.id})">
                        <span class="">全部</span>
                    </div>
                    <c:forEach items="${requestScope.second_categoryList}" var="category" varStatus="status">
                        <div class="body-second" onclick="javascript:selectByCategoryId(${category.id})">
                            <span class="">${category.name}</span>
                        </div>
                    </c:forEach>
                </td>
            </tr>
            <tr>
                <td>
                    <label class="head">排序规则</label>
                </td>
                <td>
                    //TODO:有空再写
                </td>
            </tr>
            <tr>
                <td>
                    <label class="head">操作</label>
                </td>
                <td>
                    <a href="/manage/scenic_spot/save">添加景点</a>
                </td>
            </tr>
            </tbody>
        </table>

        <c:forEach items="${requestScope.pageResult.list}" var="result_scenicSpot" varStatus="status">
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img src="http://img.wetravel.top/${result_scenicSpot.mainImage}" alt="${result_scenicSpot.name}">
                        <div class="caption">
                            <h3>${result_scenicSpot.name}</h3>
                            <p>${result_scenicSpot.subtitle}</p>
                            <p><a href="#" class="btn btn-primary" role="button">修改</a> <a href="#" class="btn btn-default" role="button">下架</a></p>
                        </div>
                    </div>
                </div>
        <%--<table class="table table-bordered scenic-spot-table">--%>
            <%--<tbody valign="middle">--%>
            <%--<tr>--%>
                <%--<td class="scenic-spot-main-img">--%>
                    <%--<img class="img-responsive center-block" src="http://img.wetravel.top/${result_scenicSpot.mainImage}" alt="恭王府">--%>
                <%--</td>--%>
                <%--<td>--%>
                    <%--<div class="scenic-spot-name"><a href=""><strong>${result_scenicSpot.name}</strong></a></div>--%>
                    <%--<div class="scenic-spot-subtitle">${result_scenicSpot.subtitle}</div>--%>
                    <%--<div class="scenic-spot-address">${result_scenicSpot.address}</div>--%>
                <%--</td>--%>
            <%--</tr>--%>
            <%--</tbody>--%>
        <%--</table>--%>
        </c:forEach>
        <nav aria-label="Page navigation" style ="text-align: center;">
            <ul class="pagination  page-helper">
                <c:if test="${requestScope.pageResult.hasPreviousPage ==true}">
                    <li>
                        <a href="javascript:changePage(${requestScope.pageResult.prePage})" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                </c:if>
                <c:if test="${requestScope.pageResult.hasPreviousPage ==false}">
                    <li class="disabled">
                      <span>
                        <span aria-hidden="true">&laquo;</span>
                      </span>
                    </li>
                </c:if>
                <c:forEach items="${requestScope.pageResult.navigatepageNums}" var="num" varStatus="status">
                    <li><a href="javascript:changePage(${num})">${num}</a></li>
                </c:forEach>
                <c:if test="${requestScope.pageResult.hasNextPage ==true}">
                    <li>
                        <a href="javascript:changePage(${requestScope.pageResult.nextPage})" aria-label="Previous">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </c:if>
                <c:if test="${requestScope.pageResult.hasNextPage ==false}">
                    <li class="disabled">
                      <span>
                        <span aria-hidden="true">&raquo;</span>
                      </span>
                    </li>
                </c:if>
            </ul>
        </nav>
    </div>
</div>

</body>
</html>
